<%@ page  contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>查看数据曲线图</title>
		
		<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">
		
$(function () { $('#maishen').highcharts({
 	chart: { 
 	type: 'spline' ,
 	marginRight:100,
 	},
 	colors:["#000"],
 	 credits: {
    		enabled: false
    		}, 
 	title: { 
 	text: '${rtuu.quyu}中科水质水位埋深数据曲线图'
 	}, 
 	subtitle: { 
 	text: '' 
 	},
  	xAxis: {
  	 type: 'datetime',
      labels:{
      formatter:function(){
      return Highcharts.dateFormat('%m-%d-%H时', this.value); 
      }
            },
     title: {
            text: '监测时间'
            }
            }, 
              
  yAxis: { 
  lineWidth:1,
  	title: { 
  	text: '水位埋深(m)' 
  	},
  	labels: { formatter: function() { return this.value +'m'} },  
  }, 
  tooltip: { 
  crosshairs: true, 
  shared: true,
   headerFormat: '<b>{series.name}</b><br>',
   pointFormat: '{point.x:%m月 %e日}: {point.y:.2f}m',
   enabled:false
   }, 
  plotOptions: { 
  	spline:{  
  		lineWidth: 1,
  		 marker: {
                            radius: 2,
                   }  
  		 } }, 
  series: [{  
  			name: '水位埋深',
            data: [${datal.shuiweimaishen}] 
  }] 
  }); 
  });
  
  //---------------------------------------------------------
  $(function () { $('#biaogao').highcharts({
 	chart: { 
 	type: 'spline' ,
 	marginRight:100,
 	},
 	colors:["#000"],
 	 credits: {
    		enabled: false
    		}, 
 	title: { 
 	text: '${rtuu.quyu}中科水质水位标高数据曲线图'
 	}, 
 	subtitle: { 
 	text: '' 
 	},
  	xAxis: {
  	 type: 'datetime',
      labels:{
      formatter:function(){
      return Highcharts.dateFormat('%m-%d-%H时', this.value); 
      }
            },
     title: {
            text: '监测时间'
            }
            }, 
              
  yAxis: { 
  lineWidth:1,
  	title: { 
  	text: '水位标高(m)' 
  	},
  	labels: { formatter: function() { return this.value +'m'} },  
  }, 
  tooltip: { 
  crosshairs: true, 
  shared: true,
   headerFormat: '<b>{series.name}</b><br>',
   pointFormat: '{point.x:%m月 %e日}: {point.y:.2f}m',
   enabled:false
   }, 
  plotOptions: { 
  	spline:{  
  		lineWidth: 1,
  		 marker: {
                            radius: 2,
                   }  
  		 } }, 
  series: [{  
  			name: '水位标高',
            data: [${datal.shuiweibiaogao}] 
  }] 
  }); 
  });
  
  //---------------------------------------------
   $.CurrentNavtab.find('#diandaolv').highcharts({
        chart: {
            type: 'spline',
            marginRight:100,
            
        },
        colors:["#000"],
         credits: {
    	enabled: false
    	},
        title: {
            text: '${rtuu.quyu}中科水质电导率数据曲线图'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels:{
      		formatter:function(){
      		return Highcharts.dateFormat('%m-%d-%H时', this.value); 
     		 }
            },
            title: {
                text: '监测时间'
            }
        },
        yAxis: {
        lineWidth:1,
            title: {
                text: '电导率'
            },
            labels: { formatter: function() { return this.value +'°'} },
        },
       
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%m月 %e日}: {point.y:.2f}°',
			enabled:false
        },

        plotOptions: {
            spline: { 
  				lineWidth: 1,
				 marker: {
                            radius: 2,
                   }  
            }
        },

        series: [{
            name: '电导率',
            data: [${datal.diandaolv}]
        }
      ]
});
  
  //---------------------------------------------
   $.CurrentNavtab.find('#shuiwen').highcharts({
        chart: {
            type: 'spline',
            marginRight:100,
            
        },
        colors:["#000"],
         credits: {
    	enabled: false
    	},
        title: {
            text: '${rtuu.quyu}中科水质水温数据曲线图'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels:{
      		formatter:function(){
      		return Highcharts.dateFormat('%m-%d-%H时', this.value); 
     		 }
            },
            title: {
                text: '监测时间'
            }
        },
        yAxis: {
        lineWidth:1,
            title: {
                text: '水温(°)'
            },
            labels: { formatter: function() { return this.value +'°'} },
        },
       
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%m月 %e日}: {point.y:.2f}°',
			enabled:false
        },

        plotOptions: {
            spline: { 
  				lineWidth: 1,
				 marker: {
                            radius: 2,
                   }  
            }
        },

        series: [{
            name: '水温(°)',
            data: [${datal.wendu}]
        }
      ]
});

		</script>
	</head>
	<body>
<div class="bjui-pageContent">
<div class="bjui-searchBar clearfix" style="height:40px;padding:10px;">
        	<button class="btn-default" data-icon="plus" data-url="${pageContext.request.contextPath}/data/selectZKData.do?tongyicode=${rtuu.tongyicode}"
				data-toggle="navtab" data-id="equi-data" data-title="${rtuu.quyu}数据">查看数据</button>
           <button class="btn-default" data-icon="plus" data-url="${pageContext.request.contextPath}/equi/selectZKSingle.do?tongyicode=${rtuu.tongyicode}"
				data-toggle="navtab" data-id="equi-data" data-title="${rtuu.quyu}数据">查看设备</button>
        </div>
    <div style="margin:15px auto 0; width:95%;">
        <div class="row" style="padding: 0 8px;">
      <div style="margin:5px auto 0; width:100%;">   
               <div style="width:98%" id="biaogao"></div>
               <div style="width:98%" id="maishen"></div>
               <div style="width:98%" id="diandaolv"></div>
               <div style="width:95%" id="shuiwen"></div>
                
           
        </div>
  </div>
  </div>
  </div>
	</body>
</html>
